<template>
  <div
    class="titleComponent"
    v-if="oItem"
    :style="{
      paddingTop: oItem.main.contentPaddingTop + 'px',
      paddingBottom: oItem.main.contentPaddingBottom + 'px',
      paddingLeft: oItem.main.contentPaddingLR + 'px',
      paddingRight: oItem.main.contentPaddingLR + 'px',
    }"
  >
    <div
      class="titleWrapper"
      :style="{
        borderTopLeftRadius: oItem.main.contentBorderRadiusTop + 'px',
        borderTopRightRadius: oItem.main.contentBorderRadiusTop + 'px',
        borderBottomRightRadius: oItem.main.contentBorderRadiusBottom + 'px',
        borderBottomLeftRadius: oItem.main.contentBorderRadiusBottom + 'px',
        backgroundColor: oItem.main.bgColor,
        justifyContent: oItem.main.titleTextPosition,
      }"
    >
      <div class="left">
        <p class="title">
          <i
            :class="oItem.main.titleIcon"
            v-if="
              oItem.main.titleIcon != '' &&
              oItem.main.titleIcon.indexOf('icon-') > -1
            "
            :style="{ color: oItem.main.titleIconColor }"
          ></i>
          <img
            v-if="
              oItem.main.titleIcon &&
              oItem.main.titleIcon.indexOf('icon-') == -1
            "
            :src="oItem.main.titleIcon"
            alt=""
            style="width: 16px; height: 16px; margin-right: 5px"
          />
          <span
            :style="{
              fontSize: oItem.main.titleFontSize + 'px',
              fontWeight: oItem.main.titleFontWeight,
              color: oItem.main.titleFontColor,
            }"
            >{{ oItem.main.titleText }}</span
          >
        </p>
        <p class="subTitle" v-if="oItem.main.displaySubTitle">
          <i
            :class="oItem.main.subTitleIcon"
            v-if="
              oItem.main.subTitleIcon != '' &&
              oItem.main.subTitleIcon.indexOf('icon-') > -1
            "
            :style="{ color: oItem.main.subTitleIconColor }"
          ></i>
          <img
            v-if="
              oItem.main.subTitleIcon &&
              oItem.main.subTitleIcon.indexOf('icon-') == -1
            "
            :src="oItem.main.subTitleIcon"
            alt=""
            style="width: 16px; height: 16px; margin-right: 5px"
          />
          <span
            :style="{
              fontSize: oItem.main.subTitleFontSize + 'px',
              fontWeight: oItem.main.subTitleFontWeight,
              color: oItem.main.subTitleFontColor,
            }"
            >{{ oItem.main.subTitleText }}</span
          >
        </p>
      </div>
      <div class="right" v-if="oItem.main.displayMore">
        <span :style="{ color: oItem.main.moreFontColor }">{{
          oItem.main.moreText
        }}</span>
        <i
          :class="oItem.main.moreIcon"
          :style="{ color: oItem.main.moreIconColor }"
        ></i>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "main_titleComponent",
  data() {
    return {
      oItem: null,
      rightIndex: 0,
      catalogIndex: 0,
    };
  },
  created() {},
  props: ["item", "ename", "id"],
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
   
  },
  methods: {
    //页面初始化
    init() {
      this.oItem = null;
      this.oItem = JSON.parse(JSON.stringify(this.item));
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped>
.titleComponent {
  width: 100%;
  display: flex;
}
.titleComponent .titleWrapper {
  width: 100%;
  min-height: 40px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  align-items: center;
  position: relative;
}
.titleComponent .titleWrapper .left {
  display: flex;
  flex-direction: column;
}
.titleComponent .titleWrapper .left .title {
  display: flex;
  align-items: center;
}
.titleComponent .titleWrapper .left .title i {
  margin-right: 3px;
}
.titleComponent .titleWrapper .left .title span {
}
.titleComponent .titleWrapper .left .subTitle {
  display: flex;
  align-items: center;
}
.titleComponent .titleWrapper .left .subTitle i {
  margin-right: 3px;
}
.titleComponent .titleWrapper .left .subTitle span {
}
.titleComponent .titleWrapper .right {
  display: flex;
  font-size: 12px;
  position: absolute;
  right: 10px;
  z-index: 2;
}
.titleComponent .titleWrapper .right span {
}
.titleComponent .titleWrapper .right i {
  transform: scale(0.8);
}
</style>